<template>
  <div class="telMatch">
    <div>{{$t('audit.facilityNotice')}}</div>
    <el-table :data="currentData" :row-class-name="tableRowClassName">
      <el-table-column :label="$t('common.type')" width="180"><template slot-scope="scope">{{$t('common.mobileNumber')}}</template></el-table-column>
      <el-table-column :label="$t('audit.matchPerson')" width="180" prop="contactName"></el-table-column>
      <el-table-column :label="$t('audit.matchNumber')" min-width="200" prop="phone"></el-table-column>
      <el-table-column :label="$t('common.operation')" width="150">
        <template slot-scope="scope">
          <el-button class="check_exception" @click="goDetail(scope.row.userId)" type="text" size="small">{{$t('common.check')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="changePage" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next"
                   :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';

  export default {
    name: 'telMatch',
    components: {
      Pagination
    },
    props: {
      userId: {
        default: ''
      }
    },
    mixins: [mixin],
    data() {
      return {
        currentData: [],
        page: {
          limit: 20, // 每页20条数据
          // total: '',
          page: 1,
        }
      };
    },
    methods: {
      getTableData() {
        const params = {
          userId: this.userId,
        };
        this.$api.audit.matchUserContact(params).then((res) => {
          const { status, data, error } = res;
          this.telMatchData = [];
          if (status === '1' && error === '00000000') {
            this.contactData = data.data || [];
            this.dataSlice();
            this.page.total = data.data.length;
          }
        });
      },
      // 分页
      dataSlice() {
        let range = (this.page.page - 1) * this.page.limit;
        this.currentData = this.contactData.slice(range, range + this.page.limit);
      },
      changePage(val) {
        this.page.page = val;
        let range = (this.page.page - 1) * this.page.limit;
        this.currentData = this.contactData.slice(range, range + 20);
      },
      tableRowClassName(row, index) {
        if (row.showRed) { // 根据接口返回的字段判断是否标红
          return 'red_color';
        }
        return '';
      },
      goDetail(id) {
        this.$openNewBlank(`#/conf/detail/${id}/${this.$root.local}`);
      },
    },
    created() {
      this.getTableData();
    }
  };
</script>

<style lang="scss" scope>
  .el-table .red_color {
    color: #FF4949;
  }
</style>
